<script setup lang="ts">
import { reactive } from 'vue'
import { Form } from 'ant-design-vue'
import type { RuleObject } from 'ant-design-vue/es/form';
import { handleForm } from '@/utils/alert'

type ComEmits = {
  submit: [params: PaginateQuery<UserWaybillTemplateQuery>];
  // 按钮点击事件
  button: []
}

const emit = defineEmits<ComEmits>()

// 补充表单字段
const formState = reactive<PaginateQuery<UserWaybillTemplateQuery>>({
  acount_id: '',
  wp_code: '',
  branch_code: ''
})

// 补充表单字段规则, 无规则也需要添加字段
const formRules = reactive<PartialRecord<UserWaybillTemplateQuery, RuleObject[]>>({
  acount_id: [],
  wp_code: [],
  branch_code: []
})
const { validate, validateInfos, resetFields } = Form.useForm(formState, formRules)

const onSubmit = async () => {
  const res = await validate().catch(handleForm)
  if (res) emit('submit', res)
}
const onReset = () => resetFields()

</script>


<template>
  <AForm layout="inline" autocomplete="off" :model="formState" @finish="onSubmit">
    <AFormItem label="电子面单账号" v-bind="validateInfos.acount_id">
      <AInput v-model:value="formState.acount_id"></AInput>
    </AFormItem>

    <AFormItem label="快递编号" v-bind="validateInfos.wp_code">
      <AInput v-model:value="formState.wp_code"></AInput>
    </AFormItem>

    <AFormItem label="网点编号" v-bind="validateInfos.branch_code">
      <AInput v-model:value="formState.branch_code"></AInput>
    </AFormItem>

    <div class="flex justify-end w-full space-x-2 py-2">
      <AButton type="primary" @click="emit('button')">添加快递模板</AButton>

      <AButton type="primary" html-type="submit">搜索</AButton>
      <AButton @click="onReset" danger>重置</AButton>
    </div>
  </AForm>
</template>